<script setup>
import { toRef, useAttrs, inject, ref, onDeactivated, onActivated } from 'vue'
import HelloWord from './HelloWorld.vue'
import TheWelcome from './TheWelcome.vue'
const tabs = {
  HelloWord, TheWelcome
}
const currentTab = ref('HelloWord')
onActivated(()=>{
  console.log('组件被激活了，onActivated');
})
onDeactivated(()=>{
  console.log('组件被缓存l ，onDeactivated');
})
</script>
<template>
  <!-- <div>子组件插槽练习</div> -->
  插槽内容：<slot></slot>
  <div class="tab">
    <button v-for="(_, tab) in tabs" :key="tab" @click="currentTab = tab">{{tab}}</button>
  </div>
  <!-- 默认情况下，一个组件实例在被替换掉后会被销毁,以通过 <KeepAlive>or <keep-alive> 组件强制被切换掉的组件仍然保持“存活”的状态 -->
  <KeepAlive include="HelloWord">
    <component :is="tabs[currentTab]"></component>
  </KeepAlive>
</template>
    